import { lazy } from 'react';
import { Input, Select, InputNumber, DatePicker } from 'antd';
import moment from 'moment';
import { GetFilds, type IFieldValue } from './GetFilds'
import { InputTree } from '../InputTree'


const SelectComponent = lazy(() =>  import("@inbiz/setters").then(res => ({default: res.SelectComponent})))
export type IValueSource = 'const' | 'node' | 'comp' | 'context' | 'model';

interface ITypeValueField {
  field: IFieldValue,
  value: any
}
interface IValueType {
  datakey: string;
  formValue: any;
  type?: string;
  value: string | ITypeValueField;
  link: string;
  onChange: (val: { [key: string]: string }) => void;
}

/**
 * 值组件
 * **/
export const ValueTypeSelect = (props: IValueType) => {
  const type: IValueSource = props.formValue[props.link];
  let element = null;

  function handleChange(value: any) {
    props.onChange({
      [props.datakey]: value
    })
  }

  const typeValue = props.value as string;
  const _ele = <Input
    value={typeValue}
    style={{ width: 180 }}
    placeholder={'输入值'}
    allowClear
    onChange={(e: React.BaseSyntheticEvent) => {
      handleChange(e.target.value)
    }} />


  switch (type) {
    case 'node': element = <InputTree value={typeValue} onChange={handleChange} style={{ width: 180 }} />; break;
    case 'context': element = _ele; break;
    case 'model':
      const fieldValue = props.value as ITypeValueField;
      element = <TypeValueFieldSelect
        value={fieldValue}
        onChange={handleChange}
      />; break;
    case 'comp':
      element = <SelectComponent
        style={{ minWidth: 180 }}
        value={props.value}
        onChange={handleChange}
        placeholder={'请选择'}
        allowClear
      />; break;
    default:
      if (props.formValue.field || props.type) {
        const fieldType: string = props.type ?? props.formValue.field?.type;
        if (fieldType) {
          switch (fieldType) {
            case 'int': element = <InputNumber
              style={{ width: 180 }}
              onChange={handleChange}
              value={props.value}

            />; break;
            case 'decimal': element = <InputNumber
              style={{ width: 180 }}
              onChange={handleChange}
              value={props.value}
            />; break;
            case 'boolean': element = <Select
              value={props.value}
              style={{ width: 180 }}
              options={[
                {
                  label: "是",
                  value: true
                },
                {
                  label: "否",
                  value: false
                }
              ]}
              allowClear
              onChange={handleChange}
            />; break;
            case 'datetime': element = <DatePicker
              value={props.value ? moment(props.value) : undefined}
              showTime
              // format="YYYY-MM-DD HH:mm:ss" 
              style={{ width: 180 }}
              onChange={(val, model) => {
                handleChange(val)
              }} />; break;
            case 'varchar': element = _ele; break;
            case 'bigInt': element = _ele; break;
            case 'text': element = _ele; break
            default: element = <span>没有匹配的组件</span>; break;
          }
        } else {
          element = _ele
        }
      } else {
        element = _ele
      }
  }
  return element
}

/**
 * field选择
 * **/
export const TypeValueFieldSelect = (props: {
  value: any,
  onChange: (val: ITypeValueField) => void
}) => {
  const { value, onChange } = props;
  const fieldSelect = value as ITypeValueField;
  return <div className='inbiz-typevalue-fieldselect' style={{
    display: 'flex'
  }}>
    <GetFilds
      value={fieldSelect.field}
      datakey='field'
      onChange={(val) => {
        onChange({
          ...fieldSelect,
          ...val
        })
      }}
      style={{
        marginRight: 10
      }}
    />
    <ValueTypeSelect
      formValue={value}
      value={fieldSelect.value}
      datakey='value'
      link='field'
      onChange={(val) => {
        onChange(
          {
            ...fieldSelect,
            ...val
          }
        )
      }} />
  </div>
}